import{d as t,M as l,A as c,h as d}from"./Anchors-CRD96j4l.js";import{D as r,a as i}from"./Demo-Ck8WGKWN.js";import"./index-BpvWz174.js";const m={path:"/view/timeline",name:"timeline",title:"Timeline 时间轴"};function s(n){const e={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",span:"span",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...n.components};return l(d,{children:[l("div",{class:"sys-ctx-main-left",children:[l(e.h1,{id:"sp-",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-",children:t(e.span,{className:"icon icon-link"})}),m.title]}),l(e.h2,{id:"sp-demos",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-demos",children:t(e.span,{className:"icon icon-link"})}),"代码演示 "]}),t(r,{columns:2}),t(i,{id:"base",title:"基础用法",src:"1base.demo.tsx",code:`import { Timeline } from "cui-solid";

export default () => {
    return <Timeline>
        <Timeline.Item>
            <label class="time">1976年</label>
            <span class="content">Apple I 问世</span>
        </Timeline.Item>
        <Timeline.Item>
            <label class="time">1984年</label>
            <span class="content">发布 Macintosh</span>
        </Timeline.Item>
        <Timeline.Item>
            <label class="time">2007年</label>
            <span class="content">发布 iPhone</span>
        </Timeline.Item>
        <Timeline.Item>
            <label class="time">2010年</label>
            <span class="content">发布 iPad</span>
        </Timeline.Item>
    </Timeline>
}`,scopes:void 0,children:t(e.p,{children:"基础用法"})}),t(i,{id:"color",title:"颜色",src:"2color.demo.tsx",code:`import { Timeline } from "cui-solid";

export default () => {
    return <Timeline>
        <Timeline.Item color="green">发布1.0版本</Timeline.Item>
        <Timeline.Item color="green">发布2.0版本</Timeline.Item>
        <Timeline.Item color="red">严重故障</Timeline.Item>
        <Timeline.Item color="blue">发布3.0版本</Timeline.Item>
    </Timeline>
}`,scopes:void 0,children:l(e.p,{children:["用各种颜色来标识不同状态，可以使用 ",t(e.code,{className:"sp-inline-code",children:"green"}),"、",t(e.code,{className:"sp-inline-code",children:"red"}),"、",t(e.code,{className:"sp-inline-code",children:"blue"}),"、",t(e.code,{className:"sp-inline-code",children:"yellow"}),"或自定义的颜色，默认是 ",t(e.code,{className:"sp-inline-code",children:"blue"}),"。"]})}),t(i,{id:"fill",title:"填充",src:"3fill.demo.tsx",code:`import { Timeline } from "cui-solid";

export default () => {
    return <Timeline>
        <Timeline.Item color="green" fill>发布1.0版本</Timeline.Item>
        <Timeline.Item color="green" fill>发布2.0版本</Timeline.Item>
        <Timeline.Item color="red" fill>严重故障</Timeline.Item>
        <Timeline.Item color="blue" fill>发布3.0版本</Timeline.Item>
    </Timeline>
}`,scopes:void 0,children:l(e.p,{children:["设置 ",t(e.code,{className:"sp-inline-code",children:"fill"})," 可以将 ",t(e.code,{className:"sp-inline-code",children:"color"})," 填充节点"]})}),t(i,{id:"alternate",title:"交替",src:"4alternate.demo.tsx",code:`import { Timeline } from "cui-solid";

export default () => {
    return <Timeline mode="alternate">
        <Timeline.Item time="2023-01-01 12:00:00">
            <label class="time">第一个节点内容</label>
            <span class="content">描述信息</span>
        </Timeline.Item>
        <Timeline.Item time="2023-01-02 12:00:00">
            <label class="time">第二个节点内容</label>
            <span class="content">描述信息</span>
        </Timeline.Item>
        <Timeline.Item time="2023-01-03 12:00:00">
            <label class="time">第三个节点内容</label>
            <span class="content">描述信息</span>
        </Timeline.Item>
        <Timeline.Item time="2023-01-04 12:00:00">
            <label class="time">第四个节点内容</label>
            <span class="content">描述信息</span>
        </Timeline.Item>
        <Timeline.Item time="2023-01-05 12:00:00">
            <label class="time">第五个节点内容</label>
            <span class="content">描述信息</span>
        </Timeline.Item>
    </Timeline>
}`,scopes:void 0,children:l(e.p,{children:["设置 ",t(e.code,{className:"sp-inline-code",children:"mode='alternate'"})," 可以交替显示时间轴内容"]})}),t(i,{id:"right",title:"靠右",src:"5right.demo.tsx",code:`import { Timeline } from "cui-solid";

export default () => {
    return <Timeline mode="right">
        <Timeline.Item time="2023-01-01 12:00:00">
            <label class="time">第一个节点内容</label>
            <span class="content">描述信息</span>
        </Timeline.Item>
        <Timeline.Item time="2023-01-02 12:00:00">
            <label class="time">第二个节点内容</label>
            <span class="content">描述信息</span>
        </Timeline.Item>
        <Timeline.Item time="2023-01-03 12:00:00">
            <label class="time">第三个节点内容</label>
            <span class="content">描述信息</span>
        </Timeline.Item>
    </Timeline>
}`,scopes:void 0,children:l(e.p,{children:["设置 ",t(e.code,{className:"sp-inline-code",children:"mode='right'"})," 可以渲染靠右的时间轴"]})}),t(i,{id:"center",title:"时间节点靠左",src:"6center.demo.tsx",code:`import { Timeline } from "cui-solid";

export default () => {
    return <Timeline mode="center">
        <Timeline.Item time="2023-01-01 12:00:00">
            <label class="time">第一个节点内容</label>
            <span class="content">描述信息</span>
        </Timeline.Item>
        <Timeline.Item time="2023-01-02 12:00:00">
            <label class="time">第二个节点内容</label>
            <span class="content">描述信息</span>
        </Timeline.Item>
        <Timeline.Item time="2023-01-03 12:00:00">
            <label class="time">第三个节点内容</label>
            <span class="content">描述信息</span>
        </Timeline.Item>
    </Timeline>
}`,scopes:void 0,children:l(e.p,{children:["设置 ",t(e.code,{className:"sp-inline-code",children:"mode='center'"})," 可以将时间靠左显示"]})}),t(i,{id:"icon",title:"自定义轴点",src:"7icon.demo.tsx",code:`import { Icon, Timeline } from "cui-solid";

export default () => {
    return <Timeline>
        <Timeline.Item color="green" icon={<Icon name="trophy" size={13}/>}>发布1.0版本</Timeline.Item>
        <Timeline.Item color="green">发布2.0版本</Timeline.Item>
        <Timeline.Item color="red">严重故障</Timeline.Item>
        <Timeline.Item color="blue">发布3.0版本</Timeline.Item>
    </Timeline>
}`,scopes:void 0,children:t(e.p,{children:"自定义轴点的内容，一个图标。"})}),l(e.h2,{id:"props",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#props",children:t(e.span,{className:"icon icon-link"})}),"属性 "]}),l(e.table,{className:"sp-table",children:[t(e.thead,{children:l(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"属性"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"类型"}),t(e.th,{style:{textAlign:"left"},children:"默认值"})]})}),l(e.tbody,{children:[l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"classList"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"class"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"style"}),t(e.td,{style:{textAlign:"left"},children:"自定义样式"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"mode"}),t(e.td,{style:{textAlign:"left"},children:"模式"}),t(e.td,{style:{textAlign:"left"},children:"left | right | alternate | center |"}),t(e.td,{style:{textAlign:"left"}})]})]})]}),l(e.h2,{id:"item_props",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#item_props",children:t(e.span,{className:"icon icon-link"})}),"Item属性 "]}),l(e.table,{className:"sp-table",children:[t(e.thead,{children:l(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"属性"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"类型"}),t(e.th,{style:{textAlign:"left"},children:"默认值"})]})}),l(e.tbody,{children:[l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"classList"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"class"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"color"}),t(e.td,{style:{textAlign:"left"},children:"轴点颜色"}),t(e.td,{style:{textAlign:"left"},children:"green | blue | red"}),t(e.td,{style:{textAlign:"left"},children:"blue"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"icon"}),t(e.td,{style:{textAlign:"left"},children:"轴点自定义图标"}),t(e.td,{style:{textAlign:"left"},children:"JSXElement"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"fill"}),t(e.td,{style:{textAlign:"left"},children:"轴点填充color颜色"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"time"}),t(e.td,{style:{textAlign:"left"},children:"时间轴每项的时间"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"}})]})]})]})]}),`
`,`
`,`
`,t(c,{data:[{id:"",depth:1,title:""},{id:"sp-demos",depth:2,title:"代码演示"},{id:"base",title:"基础用法",src:"1base.demo.tsx"},{id:"color",title:"颜色",src:"2color.demo.tsx"},{id:"fill",title:"填充",src:"3fill.demo.tsx"},{id:"alternate",title:"交替",src:"4alternate.demo.tsx"},{id:"right",title:"靠右",src:"5right.demo.tsx"},{id:"center",title:"时间节点靠左",src:"6center.demo.tsx"},{id:"icon",title:"自定义轴点",src:"7icon.demo.tsx"},{id:"props",depth:2,title:"属性"},{id:"item_props",depth:2,title:"Item属性"}]})]})}function p(n={}){const{wrapper:e}=n.components||{};return e?t(e,{...n,children:t(s,{...n})}):s(n)}export{p as default,m as frontmatter};
